<template>
  <div style="padding:10px;">
    <section class="content-header">
      <h1 v-if="!update">
        商城轮播图添加
        <small>Swiper</small>
      </h1>
      <h1 v-else>
        商城轮播图修改
        <small>Swiper</small>
      </h1>
    </section>
    <!-- Main content -->
    <section class="content">
      <Card class>
        <div class="flex">
          <div style="width:100px;line-height:30px;">标题</div>
          <i-input v-model="name" placeholder="请输入标题"></i-input>
        </div>
        <br />
        <div class="flex">
          <div style="width:100px;line-height:30px;">图片</div>
          <div style="width:100%;">
            <ImagePanel :single="true" v-model="img">
              <Button type="primary">上传</Button>
            </ImagePanel>
          </div>
        </div>
        <br />
        <div class="flex">
          <div style="width:100px;line-height:30px;"></div>
          <div style="width:100%;" v-if="img!=''" >
            <img v-if="img!=''" :src="img" alt style="max-height:100px;" />
          </div>
        </div>
        <br />
        <div v-if="p_link&&p_link!='pages/enter/enter'" class="flex">
          <div style="width:100px;line-height:30px;">链接到的id</div>
          <i-input v-model="p_ljid" placeholder="请输入链接到的id"></i-input>
        </div>
        <br />
        <div class="flex">
          <div style="width:100px;line-height:30px;">排序值</div>
          <i-input v-model="sort" placeholder="请输入排序值(数值越小，排序靠前)"></i-input>
        </div>
        <br />
        <Button type="primary" style="margin-left:100px;" @click="save">保存</Button>
        <Button type="primary" style="margin-left:100px;" @click="fanhui">取消</Button>
      </Card>
    </section>
  </div>
</template>

<script>
import swiperapi from "@/api/shop1";
import ImagePanel from "@/components/ImagePanel.vue";
export default {
  components: {
    ImagePanel
  },
  data() {
    return {
      update: false,
      name: "",
      img: "",
      sort: "",
      id: "",
      p_ljid: "",
      p_link: "",
      p_ljList: [
        {
          value: "",
          label: "空"
        },
        {
          value: "pages/good_detail/good_detail",
          label: "商品详情"
        }
      ]
    };
  },
  created() {
    if (typeof this.$route.query.row != "undefined") {
      this.name = this.$route.query.row.name;
            this.img = this.$route.query.row.img;
            this.sort = this.$route.query.row.sort;
      this.update = true;
      this.id = this.$route.query.row.id;
    }
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    save() {
      let data = {
        name: this.name,
        img: this.img,
        sort: this.sort ? this.sort : 999
      };
      if (this.update) {
        data.id = this.id;
        swiperapi
          .updateSwiper(data)
          .then(response => {
            if (response.data.code == 0) {
              this.$Message.success("保存成功！");
              this.$router.go(-1);
            } else {
              this.$Message.error("保存失败");
            }
          })
          .catch(error => {
            console.log(error);
            this.$Message.error("保存失败!");
          });
      } else {
        swiperapi
          .addSwiper(data)
          .then(response => {
            if (response.data.code == 0) {
              this.$Message.success("添加成功！");
              this.$router.go(-1);
            } else {
              this.$Message.error("保存失败");
            }
          })
          .catch(error => {
            console.log(error);
            this.$Message.error("保存失败!");
          });
      }
    }
  }
};
</script>

<style scoped>
.ivu-input-wrapper {
  width: 23% !important;
}
.ivu-input {
  width: 25% !important;
}
.image {
  max-width: 400px;
  max-height: 200px;
  margin: 10px;
}
.text-sm .content-header h1 {
  width: 400px;
}
.text-sm .content-header .breadcrumb {
  margin-top: -21px;
  float: right;
}
</style>